<template>
<div>
  <div class="tops">
    <h1 class="account"> 登录 </h1>
    <a onclick="javascript:history.back(-1);" class="back" style="float: left;"></a>
  </div>
  <div v-if="!isServerReg" style="margin: 10.6667vw 10%;">
    <h3 style="font-size: 7.2vw;color: #151515;">{{ ifLogByCode ? '验证码登录' : '密码登录' }}</h3>
    <h5 style="font-size: 5.3333vw;color: #4f4f4f;" v-if="false">还没有账户? <a style="color:#108EE9;" @click="goRegServer">立即注册</a></h5>
  </div>
  <div v-else class="log">
    <img src="http://zhanzhiyun.oss-accelerate.aliyuncs.com/20220114/1642141083636_200*200.png">
  </div>
  <div class="xinxi">
    <van-form
      validate-first
      >
      <van-field
        v-model="form.username"
        :name="ifLogByCode ?'手机号' : '账号'"
        :placeholder="'请输入'+ (ifLogByCode ?'手机号' : '账号')"
        autocomplete="false"
        :rules="[{ required: true, message: '' }]"
      ></van-field>
      <van-field
        v-if="!ifLogByCode"
        v-model="form.password"
        type="password"
        name="密码"
        autocomplete="false"
        placeholder="请填写密码"
        :rules="[{ required: true, message: '' }]"
      ></van-field>
      <!-- <div class="line line2" v-show="ifLogByCode">
        <label>请输入验证码:</label>
        <input type="number" name="" id="phoneCode" class="val" value="" />
        <a href="#" class="yzm1" onclick="send(60)" id="get_code1">获取验证码</a>
        <span class="code_shade" style="display: none;"></span>
      </div> -->
      <van-button
        :disabled="!form.username || !form.password"
        type="info" @click="memberlogin" class="dl theme-btn">登 录</van-button>
      <!-- <van-button type="info" @click="ifLogByCode = !ifLogByCode" v-if="!ifLogByCode">使用{{ !ifLogByCode ? '验证码':'账号密码' }}登录</van-button> -->
    </van-form>
    <!-- <p class="markedWords" v-if="isLocalReg">*未注册的用户使用验证码登录将自动创建会员账号</p> -->
  </div>
  <div class="jishu">
    <a href="http://www.expo2c.com">
      <p>展之云提供技术支持</p>
    </a>
  </div>
</div>
</template>

<script lang="ts">
import Vue from 'vue'
import util from '@/plugins/util'
import hex_md5 from '@/plugins/md5'
export default Vue.extend({
  name: 'Login',
  async asyncData({ req,res,params }) {
    // console.log('req', req, res, params)
    // const orgNum = params.orgNum
    // return { orgNum }
  },
  data() {
    return {
      ifLogByCode: false,   // 验证码登陆? 暂不开放
      isServerReg: false,   // 观众登记注册? 暂不开放
      allowMemerReg: false, // 注册? 暂不开放
      orgNum: 1002, // util.getQs('orgNum', true, 0),
      form: {
        username: '',
        password: '',
      }
    }
  },
  computed: {
    isLocalReg() : Boolean { // 本地注册?
      return !this.isServerReg
    },
  },
  methods: {
    async memberlogin() {
      const {data: arr} = await util.post('eip-web-vip/member/vimuser' ,{
        username: (this.form.username || '').trim(),
        password: hex_md5((this.form.password || '').trim()).toUpperCase(),
        orgNum: this.orgNum,
      })
      const state = +arr.state
      if(arr.state == 2)  util.alert('密码错误.','err', true);
      if([0,3,-1,-3].includes(arr.state))  util.alert('未查询到账号.','err', true);
      if(arr.state != 1) util.alert(arr.msg || arr.message || '登录失败','err', true);
      util.setLocal('cid', arr.data.zzorgClientId);
      util.setLocal('usrname', arr.data.f_user_name);
      util.setLocal('zzyUserId', arr.data.f_zzyuser_id);
      // stroage.setItem('password', hex_md5($("#password").val()).toUpperCase());
      window.location.href = "./index.html?orgNum="+ this.orgNum;
    },
    goRegServer() {
    },
    getVipSetting() {
      // let allowMemerReg = true;
      // $.ajax({
      //   url: "/eip-web-vip/sysSettingOrg/getValue",
      //   dataType: "json",
      //   type: "post",
      //   async: false,
      //   data: { settingCode: 'allowMemerReg',orgNum },
      //   success: function (data) {
      //     if (data && data.state == 1 && data.data) {
      //       allowMemerReg = data.data.allowMemerReg === 'true'
      //     }
      //   }
      // })
      // if(allowMemerReg){
      //   $(".zhuce").attr("href", "../pages/frontend/zzy-zc1.html?orgNum=" + orgNum).removeClass('hide');
      // }else{
      //   $('.zhuce').remove()
      // }
    }
  },
  created(){
    util.setLocal('orgNum', this.orgNum);
  },
  mounted(){
    // this.getVipSetting()
  },
})
</script>

<style lang="scss" scoped>
#app{
  background-color: unset;
}
.van-field{
	padding: 0;
}
.van-field__control{
	line-height: 10.6667vw;
	border-bottom: 1px solid #ebedf0;
	box-shadow: inset 0 0 266.6667vw #fff !important;
}
.van-button--info{
	background-color: var(--color-h5-main);
  border: 1px solid var(--color-h5-main);
}
.zhaohui {
	color: #ffffff;
	opacity: 0.9;
	font-size: 4.2667vw;
	position: absolute;
	right: 3.3333vw;
	top: 2.9333vw;
}
.log {
	width: 100%;
	img {
		display: block;
		margin: 10.6667vw auto 10.6667vw;
		width: 26.6667vw;
	}
}

.xinxi {
	width: 100%;
	flex: 1;
	box-sizing: border-box;
	padding: 0 8.8vw;
}
	.xinxi label {
		font-size: 4.2667vw;
		color: #999;
	}
	.val {
		width: 4rem;
		font-size: 4.5333vw;
		color: #666;
		height: 5.3333vw;
	}
	.line {
		/* width: 90%; */
		border-bottom: 1px solid #ccc;
		height: 10.6667vw;
		box-sizing: border-box;
		position: relative;
		padding-top: 8vw;
	}
	.same {
		width: 82.4vw;
		height: 13.3333vw;
		border-radius: 6.6667vw;
		font-size: 4vw;
	}
	.dl {
		/* background-color: #28ae39; */
		margin-top: 9.0667vw;
		width: 100%;
	}
	.zc {
		background-color: #FFF;
		color: #999;
		margin-top: 5.3333vw;
		border: 1px solid #ebebeb !important;
		display: block;
		text-align: center;
		line-height: 13.3333vw;
	}
.jishu {
	font-size: 3.2vw;
	color: var(--color-h5-text);
	/* left: 0;right: 0;bottom: 0;
	position: fixed; */
	/* margin: 21.3333vw 0 16vw 0; */
	text-align: center;
}
</style>
